<div id="app" v-cloak>
    <el-container class="layout-container-demo">
        <el-aside :width="isCollapse?`43px`:`200px`">
<!--        <el-aside width="200px" :collapse="isCollaosed">-->
            <el-scrollbar height="98vh" :style="{ 'background-color': site.index_background_color }">
                <div class="flex-column">
                    <el-menu>
                        <div class="title-left flex-row flex-content-center" :style='{"width":isCollapse?`43px`:`200px`}'>
                            <img :src="site.site_logo?site.site_logo:`/logo.png`" style="height: 50px"/>
                            <div class="name-class" v-if="!isCollapse" :style='{"color":site.index_font_color}'>{{config.site.name}}</div>
                        </div>
                    </el-menu>
<!--                    <infinite-menu :menu-data="all_menu"></infinite-menu>-->
                    <el-menu
                            :default-active="select_main.key?select_main.key:1"
                            class="el-menu-vertical-demo"
                            :collapse="isCollapse"
                            :background-color="site.index_background_color"
                            :text-color="site.index_font_color"
                            :active-text-color="site.left_action_font_color"
                            @open="handleOpen"
                            @close="handleClose"
                    >
                        <template v-for="item in all_menu" :key="item.id">
                            <menu-item :item="item" @add-main="addMain" @delmain="delMain"></menu-item>
                        </template>
                    </el-menu>
<!--                    <allmenu v-for="item in all_menu" :item="item"></allmenu>-->
                </div>
            </el-scrollbar>
        </el-aside>

        <el-container>
            <el-header class="flex-row" :style='{"background-color":site.index_background_color}'>
                <div class="flex-row flex-content-between" style="width: 100%;">
                    <div class="toolbar">
                        <el-icon :size="25" :color="site.index_font_color" style="cursor: pointer;margin-left: 20px" @click="isCollapse=!isCollapse"><Operation /></el-icon>
                    </div>
                    <div class="toolbar right30" :style='{"color":site.index_font_color}'>
                            <el-icon :size="25" :color="site.index_font_color" style="margin-right: 8px; margin-top: 1px" @click="drawer=true">
                                <Setting />
                            </el-icon>
                        <el-dropdown placement="top-start">
                            <el-button :style='{"color":site.index_font_color}' type="text"> {{userinfo?userinfo.nickname:`未登录`}} </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="showGeneral">个人资料</el-dropdown-item>
                                    <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>

                    </div>
                </div>
            </el-header>

            <div style="background-color: #071f5a"></div>
            <el-main style="background-color: #e5e7eb;!important;padding: 5px;!important;">
                <div style="background-color: #FFFFFF;padding: 10px">
                    <el-tabs v-model="activeName" class="demo-tabs" type="card" @tab-remove="removeTab" @tab-change="tabsChange">
                        <el-tab-pane v-for="(item,index) in main_config" :key="index" :name="item.key" :label="item.title" :closable="index>0?true:false">
<!--                            {{`/`+(item.module.replace(`/`))+`/`+item.url}}-->
                            <iframe v-show="item.url" :src="`/`+(item.module.replace(/^\//, ''))+`/`+item.url" style="width: 100%;min-height: calc(100vh - 180px);overflow: hidden" frameborder="0"></iframe>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-main>
        </el-container>
    </el-container>
    <el-drawer
            v-model="drawer"
            title="设置喜好"
            direction="rtl"
            size="20%"
            :before-close="handleClose"
    >
       <div class="coudi-class">
           <el-form :model="setXh" label-width="auto" style="max-width: 600px">
               <el-form-item label="侧边栏背景色">
                   <el-color-picker v-model="setXh.index_background_color" />
               </el-form-item>
               <el-form-item label="侧边栏文字颜色">
                   <el-color-picker v-model="setXh.index_font_color" />
               </el-form-item>
               <el-form-item label="侧边栏文字选中颜色">
                   <el-color-picker v-model="setXh.left_action_font_color" />
               </el-form-item>
               <el-form-item label="更换主题">
                   <el-select
                           @change="changeTheme"
                           placeholder="选择使用的主题"
                   >
                       <el-option
                               v-for="item in themeList"
                               :key="item.id"
                               :label="item.title"
                               :value="item.id"
                       />
                   </el-select>
               </el-form-item>
               <el-form-item>
                   <div class="flex-row">
                       <el-button type="primary" @click="onSubmitSave">保存设置</el-button>
                       <el-button type="success" @click="onSubmitTemp">临时使用</el-button>
                   </div>
               </el-form-item>
           </el-form>
       </div>
    </el-drawer>
</div>
<style>
    .el-dropdown:hover{
        border: none;!important;
    }
    .example-showcase .el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
    }
    .example-showcase .el-dropdown-link:hover{
        border: none;!important;
    }
    .coudi-class{
        width: 80%;
        margin-left: 10%;
    }
    .guanbiguang{
        width: 60px;
        height: 60px;
        background-color: #FFFFFF;
        position: fixed;
        font-size: 13px;
        color: #666666;
        padding: 10px;
        border-bottom: 1rpx solid #eeeeee;

    }
    .tags-class{
        margin: 5px 5px;
        cursor: pointer;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
    .name-class{
        width: auto;
        line-height: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .title-left{
        padding: 10px;
        width: calc(100% - 10px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .layout-container-demo .el-header {
        position: relative;
        color: var(--el-text-color-primary);
    }
    .layout-container-demo .toolbar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        right: 20px;
    }
    .right30{
        margin-right: 40px;
    }
    .left10{
        margin-left: 10px;
    }
    .el-menu{
        border-right: none;!important;
    }
    .el-aside11 {
        transition: background-color 0.3s;!important;
    }
    .el-menu{
        background-color: transparent;!important;
    }
</style>